<!--
 * @Description: 获取验证码
 * @Author: chaizhou
 * @Date: 2023-02-22 16:03:05
 * @LastEditTime: 2023-02-28 16:37:09
-->
<template>
  <el-button @click="handlerClick" :disabled="!!timerRef" :loading="loading">
    {{
    timerRef ? `重新获取 ${seconds} s` : "获取验证码"
    }}
  </el-button>
</template>

<script setup>
import { ref } from 'vue'
let timerRef
// 定时器实例

// 点击发送短信loading
const loading = ref(false)
// 倒计时值
const seconds = ref()

//   获取验证码
const handlerClick = async () => {
  if (timerRef) return
  timerRef = null
  loading.value = true
  let { success } = await (() => {
    return new Promise((r) => {
      setTimeout(() => {
        r({ success: true })
      }, 1000)
    })
  })()
  loading.value = false
  if (success) {
    timerRef = setInterval(() => {
      if (seconds.value > 1) {
        seconds.value--
      } else {
        seconds.value--
        clearInterval(timerRef)
        timerRef = null
      }
    }, 1000)
    seconds.value = 10
  }
}
</script>
